<template>
  <div class="container">
    <!-- 添加标签对话框 -->
    <el-dialog
      :visible="showlist"
      width="500px"
      v-bind="$attrs"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
      :title="showadd ? '添加标签' : '修改标签'"
    >
      <el-form
        ref="fromRef"
        :model="roleForm"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="所属学科" prop="subjectID">
          <el-select
            v-model="roleForm.subjectID"
            placeholder="所属学科"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in select"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input
            v-model="roleForm.tagName"
            placeholder="请输入目录名称"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/tags.js'

export default {
  props: {
    // 控制弹层是否显示
    showlist: {
      type: Boolean,
      require: true
    },
    // 控制弹层的名字 是 添加 还是 修改
    showadd: {
      type: Boolean,
      require: true
    },
    select: {
      type: [Array, Object],
      require: true

    }

  },
  created () {
    // this.subjectIDOptions = this.select
  },
  data () {
    return {
      rules: {
        subjectID: [{
          required: true,
          message: '所属学科',
          trigger: 'change'
        }],
        tagName: [{
          required: true,
          message: '请输入目录名称',
          trigger: 'blur'
        }]
      },
      // 弹层相关
      roleForm: {
        subjectID: undefined,
        tagName: undefined,
        subjectName: undefined
      }

    }
  },
  methods: {
    //
    getName (row) {
      this.roleForm = { ...row }
      // console.log(row)
    },
    onOpen () {},
    onClose () {
      this.$refs.fromRef.resetFields()
      // this.showlist = false
      this.roleForm = this.$options.data().roleForm
      // 关闭弹层
      this.$emit('update:showlist', false)
    },
    close () {
      // this.$emit('update:visible', false)
      this.onClose()
    },
    handelConfirm () {
      this.$refs.fromRef.validate(async valid => {
        if (!valid) return

        if (this.showadd) {
          try {
            // 添加标签
            await add(this.roleForm) // 调用 添加标签 接口
            // this.loadtagsList() // 刷新列表
            this.$emit('loadtagsList')
            this.$message.success('添加标签成功')
          } catch (error) {
            this.$message.error('添加标签失败')
          }
        } else {
          // 修改标签
          try {
            // console.log(this.roleForm.subjectName)
            await update(this.roleForm) // 调用 修改标签 接口
            this.$message.success('修改标签成功')
            // this.loadtagsList() // 刷新页面
            this.$emit('loadtagsList')
          } catch (error) {
            this.$message.error('添加标签失败')
          }
        }

        this.close()
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
